{% load staticfiles  %}
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<title>{{ user.firstName }} {{ user.lastName }}</title>
		<meta name="description" content="">
		<meta name="author" content="Ilya-Dorman" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

		<link rel="stylesheet" href="{% static 'social/css/normalize.css' %}">
		<link rel="stylesheet" href="{% static 'social/css/font-face.css' %}">
		<link rel="stylesheet" href="{% static 'social/css/color-schemes/dark/hot-pink.css' %}">
		<link rel="stylesheet" href="{% static 'social/css/typography.css' %}">
		<link rel="stylesheet" href="{% static 'social/css/font-awesome.css' %}">
		<link rel="stylesheet" href="{% static 'social/css/main.css' %}">
        <link rel="stylesheet" href="{% static 'social/css/styles.css' %}">
        <style>
            input{
                transition:width 1s;
                -webkit-transition:width 1s;
                width:400px;
                background-color: #0b1828;
            }
            input:focus{
                width:500px;
                background-color: #172866;
            }
            a{
                text-decoration: none;
            }
        </style>
		<script>
			document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';
		</script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


   <script>
       function findAndSend(value){
           window.location.assign("/"+value);
       }
   </script>

	</head>
	<body>
		<!--[if lt IE 7]>
			<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
		<![endif]-->


            <div id="container" style="width:1200px">
               <div id='cssmenu'>
                    <ul>
                        <li class='active'><a href='/register'><span>register</span></a></li>
                        <li ><a href='/login'><span>sign in</span></a></li>
                        <li>

                            <div class="ui-widget">
                                <label style="margin-left:50px" for="tags">Search </label>
                                <input style="margin-top: 20px;" id="tags" onkeydown="if (event.keyCode == 13) findAndSend(document.getElementById('tags').value)" />
                            </div>
                        </li>
                        <li class='has-sub last' style="float:right;"><a href='#'><span>notifications</span></a>
                            <ul>
                                <li><a href='#'><span>note1</span></a></li>
                                <li class='last'><a href='#'><span>note2</span></a></li>
                            </ul>
                        </li>
                    </ul>
                </div>


            <div id="menu" style="background-color:#2E3233;height:1000px;width:100px;float:left;">
                <b>settings</b><br>
                setting1<br>
                setting2<br>
                setting3</div>
                <div id="content" style="background-color:#000;height:1000px;width:900px;float:left;">
                    <div id="inside-content">
                        <div style="float:right;"><button id="addButton" style="background-color: #781430" onclick="send_request()">Add Friend</button>
                        </div>

                    </div>
                </div>
            <div id="friends" style="background-color:#233136;height:1000px;width:200px;float:right;">
            friends list and status of them and chat</div>


            </div>


		<footer class="site-footer site-footer-font">
			<div class="sparator"></div>
			<div class="contact">
				<a href="mailto:tellus@slt.com"><i class="icon-envelope-alt"></i> tellus@slt.com</a> &middot;
				<a href="http://www.twitter.com"><i class="icon-twitter"></i> @SLT</a> &middot;
				<a href="http://www.facebook.com"><i class="icon-facebook-sign"></i> /slt</a>
			</div>

		</footer>


		<script src="js/plugins.js"></script>
		<script src="js/main.js"></script>
        <script>
            function send_request(){
                var data = {
                    userID ={{  user.id }}
                };

                $.ajax({
                    url:"/friend",
                    data:data,
                    dataType: 'jsonp',
                    jsonp: 'callback',
                    jsonpCallback: 'changebutton'

                });
            }
            function changenutton(){
                $('#addButton').text('Request Sent');}




        </script>
		<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
		<script>
			var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
			(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
			g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
			s.parentNode.insertBefore(g,s)}(document,'script'));
		</script>
	</body>
</html>
